<template>
  <div class="one_note_main">
    <div class="row block center pt-3 pl-2 ml-1 border-bottom pb-3"
         style="background-color:rgba(255,255,255,0)">
      <div class="pt-1 pl-4" >
        <el-page-header @back="goBack">
        </el-page-header>
      </div>
    </div>
    <div class="row pt-4 pb-5 border-bottom ml-5">
      <div class="pl-3">
        <form class="newRecord">
          <div class="form-group">
            <div class="row">
              <span  style="font-size: 18px" class="pb-2">
                <span style="font-size: 18px;color: #a11918" class="pr-1">*</span>记录本标题：
              </span>
              <input type="text" class="form-control" id="record_title" style="width: 400px;height: 35px"
                     aria-describedby="titleHelp" v-model="this.newRecord.record_title" @change="ChangeTitle($event)"/>
              <small id="titleHelp" class="form-text text-muted">（请输入1-20个字符）</small>
            </div>
          </div>
          <div class="form-group">
            <div class="row">
              <span  style="font-size: 18px" class="pb-2">
                <span style="font-size: 18px;color: #a11918" class="pr-1">*</span>记录本内容：
              </span>
              <textarea  class="form-control" id="record_content" rows="25" cols="40" @change="ChangeContent($event)"
                     aria-describedby="contentHelp" v-model="this.newRecord.record_content" />
              <small id="contentHelp" class="form-text text-muted">（请输入1-2000个字符）</small>
            </div>
          </div>
        </form>
        <!-- 按钮盒子 -->
        <div class="btn-box pt-3">
          <el-button type="primary" plain @click="updateNote()" class="mr-2">修 改</el-button>
          <el-button type="primary" plain @click="clearInput()" class="mr-2">重 置</el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getRecordByID,updateRecord} from '@/api/Record'

export default {
  name: "one_note",
  data(){
    return{
      //接收参数
      record_id:this.$route.query.record_id,

      newRecord:{
        record_title:'',
        record_content:'',
      },

      nullContainer: "暂无笔记~",


    }
  },
  methods:{
    //根据record_id获取记录本信息
    init(){
      getRecordByID({
        record_id:this.$route.query.record_id
      }).then(res=>{
        this.newRecord.record_title=res.data.data.record_title;
        this.newRecord.record_content=res.data.data.record_content;
      })

    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
  //  清空输入框
    clearInput(){
      this.newRecord.record_title="";
      this.newRecord.record_content="";

    },
    ChangeTitle(event){
      this.newRecord.record_title=event.target.value;
    },
    ChangeContent(event){
      this.newRecord.record_content=event.target.value;
    },
  //  修改记录本
    updateNote(){

      if(this.newRecord.record_title.length == null){
        this.$msg.warning('记录本标题不能为空！');
        return false;
      }
      if(this.newRecord.record_content.length == null){
        this.$msg.warning('记录本内容不能为空！');
        return false;
      }
      if(this.newRecord.record_title.length>20){
        this.$msg.warning('记录本标题不能超过20字！');
        return false;
      }
      if(this.newRecord.record_content.length>2000){
        this.$msg.warning('记录本内容不能超过2000字！');
        return false;
      }

      updateRecord({
        record_id:this.record_id,
        record_title:this.newRecord.record_title,
        record_content:this.newRecord.record_content,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success('修改成功！');
        }else{
          this.$msg.error('修改失败！');
        }
      })
    }

  },
  mounted() {

  },
  created() {
    let _this=this;
    _this.init();

  },
  // watch:{
  //   record_title:{
  //     handler:function (newval,oldval) {
  //       this.title=newval;
  //     }
  //   },
  //   record_content:{
  //     handler:function (newval,oldval) {
  //       this.content=newval;
  //     }
  //   },
  // }
}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}



</style>
